<template>
  <div class="home-page">
    <!-- 顶部banner -->
    <div class="banner">
      <div class="container">
        <h1 class="logo-font">conduit</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>

    <!-- 中心主体内容 -->
    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <!-- tab栏 -->
          <div class="feed-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" v-if="Object.keys(user).length > 0" @click="showMyActicle">
                <!-- disabled -->
                <a class="nav-link" :class="currentActive === 0 ? ' active' : ''" href="javascript:;">Your Feed</a>
              </li>
              <li class="nav-item" @click="showAllActicle">
                <a class="nav-link" :class="currentActive === 1 ? ' active' : ''" href="javascript:;">Global Feed</a>
              </li>
              <li class="nav-item" v-show="isShowTag" @click="showPopularArticle">
                <a class="nav-link" :class="currentActive === 2 ? ' active' : ''" href="javascript:;" ref="showTag"></a>
              </li>
            </ul>
          </div>
          
          <!-- 文章列表 -->
          <ArticleList :articles="articleList"/>
          <!-- 页码 -->
          <Pagination :totalArticle="totalArticle" :pageSize="pageSize" :currentPage="currentPage" @pageActiveClick="pageActiveClick"/>
        </div>

        <!-- 右侧tags栏 -->
        <div class="col-md-3">
          <div class="sidebar"  v-if="tags">
            <p>Popular Tags</p>
            <div class="tag-list" v-for="(item, index) in tags" :key="index">
              <a href="javascript:;" class="tag-pill tag-default" @click="getTagContent(item)">{{ item }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script>
import { reqHomeArtical, reqHomeTags } from "../../api/home";
import Pagination from '../../components/Pagination'
import ArticleList from '../../components/ArticleList'
import {  getArticle, changePage } from "../../utils/mixin";
import marked from 'marked'
export default {
  name: "HomePages",
  mixins: [getArticle, changePage],
  data() {
    return {
      tags: [],
      isShowTag: false,
      user: JSON.parse(sessionStorage.getItem('user') || '[]'),
      // tabs栏的class类
      currentActive: 1,
      // popular的name名
      poptext:''
    };
  },
  created() {
    if(Object.keys(this.user).length > 0){
      this.article.author = this.user.username
      this.currentActive = 0
      this.getUserArtical()
    }else{
      this.getUserArtical()
    }
    
    this.getHomeTags()
  },
  methods: {
    async getHomeTags(){
      const result = await reqHomeTags()
      this.tags = result.tags
    },

    // 获取tags不同的内容
    async getTagContent(content){
      this.article = {
        tag: content,
        author: null,
        favorited: null,
      }
      this.getUserArtical()
      this.poptext = content

      this.$refs.showTag.innerHTML = '#' + content
      this.isShowTag = true
      this.currentActive = 2
    },


    // 页码着色
    /* pageActiveClick(i){
      this.currentPage = i
      // 重新发送请求
      this.getUserArtical()
    }, */
    pageActiveClick(i){
      this.pageActive(i)
      this.getUserArtical()
    },

    // 个人文章
    showMyActicle(){
      this.currentActive = 0
      this.article.author = this.user.username
      this.getUserArtical()
    },

    // 全部文章
    showAllActicle(){
      this.currentActive = 1
      this.article = {
        tag: null,
        author: null,
        favorited: null,
      }
      this.getUserArtical()
    },

    // 受欢迎文章
    showPopularArticle(){
      this.article = {
        tag: this.poptext,
        author: null,
        favorited: null,
      }
      this.currentActive = 2
      this.getUserArtical()
    }
  },
  components :{
    Pagination,
    ArticleList
  }
};
</script>
<style lang="less" scoped>
.home-page {
  .sidebar {
    .tag-list {
      display: inline-block;
    }
  }
}
</style>
